<template>
  <div id="subLine-controller">
    <div class="item-wrapper">
      <div class="item" v-for="item in subLineData" @click.stop="handleItemClick(item)">
        <div class="box" :style="{ borderColor: item.color, backgroundColor: item.color }"></div>
        <span :style="{ color: '#34c5cf' }">{{ item.name.slice(-3) }}</span>
      </div>
    </div>
  </div>

  <div class="active-panel">
    <div class="header">
      <strong>重点活动</strong>
      <span>{{ date }}</span>
    </div>
    <div class="content">
      <div class="active-wrapper" v-if="activityData.length">
        <div v-for="item in activityData" :class="['acitve-item', item.isActive ? 'item-active' : '']" @click="clickActiveItem(item)">
          <div>{{ item.activedTime }}</div>
          <div>{{ item.activedPlace }}</div>
          <div>{{ item.activity }}</div>
        </div>
      </div>
      <a-empty v-else :image="simpleImage" description="无数据" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, markRaw, ref, onBeforeUnmount } from 'vue';
import { useLineData } from '@/store';
import { getLine } from '@/api/line.js';
import { activity } from '@/store/staticData.js';
import { flyToLine, addGradientCone, removeAllCones, binkLineByName, flyToCone } from '@/cesiumTools/effectController.js';

const lineDataStore = useLineData();
let lineData = [];
const subLineData = ref([]);
const activityData = ref([]); // 重点活动数据
const date = ref('');
let viewer;
const currentStations = ref([]); // 当前线路的所有站点

// 点击线路，跳转到质心点并高亮该线段,展示重点活动，使用电子围墙的材质
const handleItemClick = item => {
  // console.log('handleItemClick', item);
  const { name, stationsList, color } = item;
  flyToLine(viewer, name);
  binkLineByName(name);
  currentStations.value = stationsList;
  activityData.value = activity;
  showActiveArea(color);
};

const showActiveArea = color => {
  removeAllCones(viewer);
  const ids = activityData.value.map(item => item.id);
  // 这里坐标直接取index和id对应的站点坐标
  const activedStations = currentStations.value
    .map((item, index) => {
      item.id = index;
      return item;
    })
    .filter(item => ids.includes(item.id));
  activedStations.forEach(item => {
    const { position, id } = item;
    // 添加渐变圆柱
    addGradientCone(viewer, {
      position,
      color,
      name: id,
    });
  });
};

// 选中具体的活动，视角跳转到该活动的位置，并高亮该活动
const clickActiveItem = item => {
  const { id } = item;
  // console.log('clickActiveItem', item);
  flyToCone(viewer, id);
};

onMounted(async () => {
  viewer = lineDataStore.Viewer;
  // 加载线路数据
  lineData = await getLine();
  lineDataStore.setData(markRaw(lineData));
  subLineData.value = lineData;
  // 加载重保活动数据
  activityData.value = activity;
  // console.log('activityData', activityData.value);
  // 加载日期
  date.value = new Date().toLocaleDateString().split('/').join('-');
});

onBeforeUnmount(() => {
  // 移除所有渐变圆柱
  removeAllCones(viewer);
});
</script>

<style scoped>
#subLine-controller {
  position: absolute;
  bottom: 90px;
  left: 34%;
  transform: translateX(-50%);
  width: 146px;
  height: 140px;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid #664a16;
  padding: 4px;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  user-select: none; /* 阻止文本选中 */
  -webkit-user-select: none; /* 兼容 Safari */
  -moz-user-select: none; /* 兼容 Firefox */
  -ms-user-select: none; /* 兼容 IE/Edge */
}

.box {
  width: 10px;
  height: 10px;
  border-width: 1px;
  border-style: solid;
  background: transparent;
  user-select: all;
  cursor: pointer;
}

.item {
  width: 65px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid #885f12;
  color: #fff;
  font-size: 10px;
  pointer-events: all;
  cursor: pointer;
}

.item:hover {
  border: 1px solid #d8961a;
}

.item > span {
  line-height: 9.005px;
}

.item > input {
  outline: none;
  border: none;
  transition: all 0.3s ease;
}

.item-wrapper {
  display: flex;
  justify-content: space-between;
  align-content: space-around;
  flex-wrap: wrap;
  flex: 1;
}

.active-panel {
  width: 500px;
  height: 140.006px;
  border: 1px solid #ab7818;
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  left: 39%;
  bottom: 90px;
  color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  user-select: none; /* 阻止文本选中 */
  -webkit-user-select: none; /* 兼容 Safari */
  -moz-user-select: none; /* 兼容 Firefox */
  -ms-user-select: none; /* 兼容 IE/Edge */
}

.active-panel > .header {
  height: 30px;
  padding: 4px;
  background: rgb(255, 255, 255);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 9%, rgba(211, 156, 50, 1) 57%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: -0.521vw;
  font-family: '等线Bold';
}

.active-panel > .header > strong {
  font-weight: normal;
  margin-right: 10px;
}

.active-panel > .header > span {
  font-size: 12px;
}

.content {
  flex: 1;
}

.active-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100%;
}

.acitve-item {
  width: 150px;
  height: 70px;
  border: 1px solid #ab7818;
  background-color: rgba(214, 174, 41, 0.1);
  margin: 4px;
  text-align: center;
  pointer-events: all;
  cursor: pointer;
  transition: all 0.3s linear;
  color: #37b3bb;
  padding-top: 12px;
  font-size: 9px;
}

.acitve-item:hover {
  background-color: rgba(214, 174, 41, 0.3);
  color: #fff;
}

.item-active {
  background-color: rgba(214, 174, 41, 0.3);
  color: #fff;
}
</style>
